<template>
  <div class="cart">
    <Header class="header">
      <div>购物车</div>
    </Header>
    <section v-if="list.length">
      <div class="item" v-for="(item,index) in list" :key="item.id">
        <div class="check"  @click="selectItem(index)">
          <van-radio-group v-model="item.checked">
            <van-radio :name="true" checked-color="#ff6700"></van-radio>
          </van-radio-group>
        </div>
        <div class="imgUrl">
          <img :src="item.goods_imgUrl" alt="">
        </div>
        <div class="item-content">
          <p>{{item.goods_name}}</p>
          <p>售价: {{item.goods_price}} 元</p>
          <van-stepper v-model="item.goods_num" :min="1" @change="handeChange($event,index,item)" />
        </div>
        <div class="delete" @click="deleteGoodsFn(item.id)">删除</div>
      </div>
    </section>
    <section v-else>
      <div class="empt">
        <img src="@/assets/img/empt.jpeg" alt="">
      </div>
    </section>
    <footer v-if="list.length">
      <div>
        <p>共{{total.num}}件 金额：</p>
        <p><span class="price">{{total.count}}</span>元</p>
      </div>
      <div>
        <button class="goOn">继续购物</button>
      </div>
      <div>
        <button class="btn" @click="goPayment">去结算</button>
      </div>
    </footer>
    <Tabbar v-else />
  </div>
</template>

<script>
import Header from '@/components/search/Header'
import Tabbar from '@/components/common/Tabbar'
import http from '@/serveies/api/request'
import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
import { Toast } from 'mint-ui'
export default {
  name: 'Cart',
  data () {
    return {
      radio: 1,
      shops: []
    }
  },
  components: {
    Tabbar,
    Header
  },
  created () {
    this.getData()
  },
  computed: {
    ...mapState({
      list: state => state.cart.list,
      selectedList: state => state.cart.selectedList
    }),
    ...mapGetters(['total'])
  },
  methods: {
    ...mapMutations(['initGetData', 'selectItem']),
    ...mapActions(['deleteGoodsFn']),
    getData () {
      http.$axios({
        url: '/api/selectCart',
        method: 'POST',
        headers: {
          token: true
        }
      }).then(res => {
        res.data.forEach(v => {
          v.checked = true
        })
        this.initGetData(res.data)
      })
    },
    handeChange (value, index, item) {
      http.$axios({
        url: '/api/updataNumCart',
        method: 'post',
        headers: {
          token: true
        },
        data: {
          goodsId: item.goods_id,
          goodsNum: value
        }
      }).then(res => {
        if (res.success) return true
      })
    },
    goPayment () {
      // 判断
      // 去结算bug
      if (this.selectedList.length === 0) {
        return Toast('至少要选择一件商品')
      }
      const newList = []
      this.list.forEach((item, index) => {
        this.selectedList.filter(v => {
          if (v === item.id) {
            newList.push(item)
          }
        })
      })
      // 发送请求 后端返回订单号
      http.$axios({
        url: '/api/addOrder',
        method: 'POST',
        headers: {
          token: true
        },
        data: {
          arr: newList
        }
      }).then(res => {
        if (res.success) {
          // 页面跳转
          this.$router.push('/payment')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cart {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #eee;
  ::v-deep .header {
    div {
      font-size: .48rem;
    }
  }
  section {
    .item {
      height: 2.4rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: .426667rem;
      margin-top: .266667rem;
      background-color: #fff;
      .check {
        input {
          border: 1px solid #ff6700;
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
      }
      .imgUrl {
        width: 2.133333rem;
        height: 2.133333rem;
        border:1px solid #eee;
        img {
          width: 1.6rem;
          height: 1.6rem;
          vertical-align: middle;
          margin: 10px;
        }
      }
      .item-content {
        font-size: .373333rem;
        p {
          margin-bottom: .08rem;
        }
      }
      .delete {
        font-size: .373333rem;
        color: #999;
      }
    }
  }
  footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1.333333rem;
    background-color: #fff;
    border-top:1px solid #eee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: .426667rem;
    div {
      flex:1;
      text-align: center;
      p {
        .price {
          color: #ff6700;
          font-size: .48rem;
          font-weight: 700;
        }
      }
      button {
        width: 100%;
        height: 1.333333rem;
      }
      .goOn {
        background: #f4f4f4;
        border: 1px solid #f4f4f4;
      }
      .btn {
        outline: none;
        background: #ff6700;
        border: none;
        color: #fff;
        text-align: center;
        width: 100%;
        font-size: .426667rem;
      }
    }
  }
  .empt {
    margin: 0 auto;
    height: 100%;
    img {
      width: 100%;
    }
  }
}
</style>
